<#include "header.ftl" />
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="${SERVER_SIDE_CONTEXT}/statics/js/jquery-1.11.1.js"></script>
    <title>省市县乡村五级联动测试</title>
</head>
<body>
<select name="province" id="province">
    <option value="请选择所在省份">请选择所在省份</option>
    <#list provinces as pr>
        <option value="${pr.code}" id="province">${pr.name}</option>
    </#list>
</select>

<select name="city" id="city" style="display: none;">
</select>

<select name="county" id="county" style="display: none;">
</select>

<select name="town" id="town" style="display: none;">
</select>

<select name="village" id="village" style="display: none;">
</select>

<#--countryside-->
<script>
    $(function () {
        $('#province').change(function () {
            //省份更改后，城市，县城的情况都要被全部更新（先清除，再添加）
            $("#city").css('display','none');
            $("#city").children().remove();     //去除原来的城市列表
            $("#county").css('display','none');
            $("#county").children().remove();     //去除原来的县级列表
            $("#town").css('display','none');
            $("#town").children().remove();     //去除原来的乡级列表
            $("#village").css('display','none');
            $("#village").children().remove();     //去除原来的村级列表

            let provinceValue = this.value;            //获取省份value作为城市的parent_id
            let cityUrl = '${SERVER_SIDE_CONTEXT}/chinaAreaOperations/city';
            $.ajax({                            //jquery ajax
                type:'post',
                url:cityUrl,
                data:{'cityCode':provinceValue},
                success:function (data) {
                    //为了防止直辖市情况下，change条件无法触发
                    $("#city").append("<option value='请选择所在城市'>请选择所在城市</option>");
                    for(let i = 0;i < data.length;i ++){
                        /*循环添加所有城市列表*/
                        $("#city").append("<option value='"+data[i].code +"'>"+data[i].name+"</option>");
                        $("#city").css('display','inline');
                    }
                }
            });
        });
        /*同上*/
        $('#city').change(function () {
            $("#county").css('display','none');
            $("#county").children().remove();     //去除原来的县级列表
            $("#town").css('display','none');
            $("#town").children().remove();     //去除原来的乡级列表
            $("#village").css('display','none');
            $("#village").children().remove();     //去除原来的村级列表

            //这里的value不要和上面的重复，否则变量提升机制会覆盖掉前面的变量值
            let cityValue = this.value;
            let countyUrl = '${SERVER_SIDE_CONTEXT}/chinaAreaOperations/county';
            $.ajax({
                type:'post',
                url:countyUrl,
                data:{'countyCode':cityValue},
                success:function (data) {
                    $("#county").append("<option value='请选择县'>请选择县</option>");
                    for(let i = 0;i < data.length;i ++){
                        $("#county").append("<option  value='"+data[i].code+"'>"+data[i].name+"</option>");
                        $("#county").css('display','inline');
                    }
                }
            })
        });
        /*同上*/
        $('#county').change(function () {
            $("#town").css('display','none');
            $("#town").children().remove();     //去除原来的乡级列表
            $("#village").css('display','none');
            $("#village").children().remove();     //去除原来的村级列表

            //这里的value不要和上面的重复，否则变量提升机制会覆盖掉前面的变量值
            let countyValue = this.value;
            let townUrl = '${SERVER_SIDE_CONTEXT}/chinaAreaOperations/town';
            $.ajax({
                type:'post',
                url:townUrl,
                data:{'townCode':countyValue},
                success:function (data) {
                        $("#town").append("<option value='请选择乡镇'>请选择乡镇</option>");
                    for(let i = 0;i < data.length;i ++){
                        $("#town").append("<option  value='"+data[i].code+"'>"+data[i].name+"</option>");
                        $("#town").css('display','inline');
                    }
                }
            })
        });
        /*同上*/
        $('#town').change(function () {
            //县更改后，更新乡镇数据
            $("#village").css('display','none');
            $("#village").children().remove();

            //这里的value不要和上面的重复，否则变量提升机制会覆盖掉前面的变量值
            let townValue = this.value;
            let villageUrl = '${SERVER_SIDE_CONTEXT}/chinaAreaOperations/village';
            $.ajax({
                type:'post',
                url:villageUrl,
                data:{'villageCode':townValue},
                success:function (data) {
                    $("#village").append("<option value='请选择村庄'>请选择村庄</option>");
                    for(let i = 0;i < data.length;i ++){
                        $("#village").append("<option  value='"+data[i].code+"'>"+data[i].name+"</option>");
                        $("#village").css('display','inline');
                    }
                }
            })
        });
    });
</script>
</body>
</html>